<template>
  <div style="display: flex; background-color: #FEF4F4;">
    <div style="margin-left: auto;margin-right: auto;padding: 10px">
      <el-button
          v-for="item in data"
          style="font-weight: bold;font-size: 15px"
          link
      >
        <router-link :to="item.link">{{item.title}}</router-link>
      </el-button
      >
    </div>
  </div>
</template>

<script setup>

const data = [
  {
    title: '首页',
    link: '/'
  },
  {
    title: '类别',
    link: '/categories'
  },
  {
    title: '收藏夹',
    link: '/collect'
  },
  {
    title: '我的借阅',
    link: '/borrow'
  },
  {
    title: '个人中心',
    link: '/individual'
  }
]

</script>

<style scoped>
.router-link-exact-active{
  text-decoration: none;
  color: #3faad9;
  font-size: 20px;
}
a{
  text-decoration: none;
  color: black;
}
</style>
